<template>
  <div>
    <!-- 全国星级饭店基本情况 -->
    <Echart :options="options" id="total-chart" height="290px" width="100%">
    </Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            formatter: function (arg) {
              let str = arg[0].name + "<br/>";
              arg.forEach((item, idx) => {
                str += `${item.marker}${item.seriesName}: `;
                switch (idx) {
                  case 0:
                    str += Number(item.data) + "个";
                    break;
                  case 1:
                    str += Number(item.data) + "个";
                    break;
                  case 2:
                    str += Number(item.data).toFixed(2) + "万人";
                    break;
                  case 3:
                    str += Number(item.data).toFixed(2) + "亿元";
                    break;
                  default:
                    break;
                }
                str += idx === arg.length - 1 ? "" : "<br/>";
              });
              return str;
            },
          },
          legend: {
            data: ["星级饭店个数", "五星级饭店个数", "从业人员", "营业收入"],
            textStyle: {
              color: "#B4B4B4",
            },
            top: "0%",
          },
          grid: {
            top: "8%",
            left: "12%",
          },
          xAxis: {
            max: 15000,
            interval: 3000,
            type: "value",
          },
          yAxis: {
            type: "category",
            data: newData.category,
          },
          series: [
            {
              name: "星级饭店个数",
              type: "bar",
              stack: "total",
              emphasis: {
                focus: "series",
              },
              itemStyle: {
                color: "#9084ff",
              },
              data: newData.numData,
            },
            {
              name: "五星级饭店个数",
              type: "bar",
              stack: "total",
              emphasis: {
                focus: "series",
              },
              itemStyle: {
                color: "#9fe080",
              },
              data: newData.fiveData,
            },
            {
              name: "从业人员",
              type: "bar",
              stack: "total",
              emphasis: {
                focus: "series",
              },
              itemStyle: {
                color: "#ffdb5c",
              },
              data: newData.peopleData,
            },
            {
              name: "营业收入",
              type: "bar",
              stack: "total",
              emphasis: {
                focus: "series",
              },
              itemStyle: {
                color: "#fb7293",
              },
              data: newData.moneyData,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style>
</style>